<template>
    <div >
        <div class="list">
            <div class="item" v-for="(item,index) in jyReport" :key="index">
                <div class="item-top"  @click="change(item)">
                    <div class="fl">
                        <div class="title">{{item.title}}</div>
                        <div class="date">
                            {{item.date}}
                        </div>
                        
                    </div>
                    <div class="fr">
                        <div class="more">
                            <img src="../assets/images/arrow-down.png" alt="" v-show="!item.isShow">
                            <img src="../assets/images/arrow-up.png" alt="" v-show="item.isShow">
                        </div>
                    </div>
                </div>

                <div class="item-detail" v-show="item.isShow">
                    <table>
                        <thead>
                            <tr>
                                <td>项目</td>
                                <td>结果</td>
                                <td>参考值</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item1,index) in item.jyReportDetail" :key="index">
                                <td>{{item1.mc}}</td>

                                <td  v-if="item1.ycts==='1'|| item1.ycts==='-'">{{item1.jg}}</td>
                                <td  v-if="item1.ycts === '2'" >{{item1.jg}}</td>
                                <td  v-if="item1.ycts ==='3'" class="color">{{item1.jg}} <img src="../assets/images/iconUp.png" alt=""></td>
                                <td  v-if="item1.ycts === '4'" class="color">{{item1.jg}} <img src="../assets/images/iconDown.png" alt=""></td>

                                <td>{{item1.ckz}}</td>
                            </tr>
                            <!--<tr >-->
                                <!--<td>白球比例</td>-->
                                <!--<td class="color">12 <img src="../assets/images/iconUp.png" alt=""></td>-->
                                <!--<td>{{item.ckz}}</td>-->
                            <!--</tr>-->
                            <!--<tr>-->
                                <!--<td>球蛋白</td>-->
                                <!--<td class="color">31 <img src="../assets/images/iconDown.png" alt=""></td>-->
                                <!--<td>1.25-2g/L</td>-->
                            <!--</tr>-->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getZYLISReportApi,getZYMedicalRecordApi,getIHDiagnosisDetailApi,getLISReportApi,getLISIndicatorsApi} from '@/api/healthRecords'
    import {Indicator} from 'mint-ui'
export default {
    name: 'jyReport',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App',
            jyReport: [ ],
            getLISIndicatorsParams:
                {
                    "yljgdm":this.listData.yljgdm,
                    "bgdh":"",
                    "bgrq":""
                }// 门诊检验报告信息 参数


        }
    },
    props:['listData'],//列表显示的参数

    methods: {
        //_1门诊检验列表
        getLISReport() {
            getLISReportApi(JSON.stringify(this.listData)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.isShow = false;
                        item.title = item.bgdlbmc;
                        item.date = item.dyrq;
                        item.jyReportDetail =[]
                    });
                    this.jyReport = response.data.data
                }
            })
        },
        //_2住院检验列表
        getZYLISReport() {
            getZYLISReportApi(JSON.stringify(this.listData)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.isShow = false;
                        item.title = item.bgdlbmc;
                        item.date = item.dyrq;
                        item.jyReportDetail =[]
                    });
                    this.jyReport = response.data.data
                }
            })
        },
        //_2住院(门诊)检验报告详情
        getLISIndicators(item) {
            if (item.isShow) {
                Indicator.open();
            }
            getLISIndicatorsApi(JSON.stringify(this.getLISIndicatorsParams)).then(response => {

                if (response.data.code == 1) {
                    item.jyReportDetail = response.data.data
                }
                Indicator.close();
            })

        },
        //_3点击箭头显示检验报告详情
        change(item) {
            item.isShow = !item.isShow;
            this.getLISIndicatorsParams.bgdh = item.bgdh;
            this.getLISIndicatorsParams.bgrq = item.bgrq;
            this.getLISIndicators(item);
        }

    },
    created(){
        if (this.listData.name == "Zyxx") {
            this.getZYLISReport();
        }else {
            this.getLISReport();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float:left;
}
.fr{
    float: right;
}
.list{
    .title {
        color: #333;
        font-size: 1rem;
    }
    .item {
        border-bottom: #EEEEEE solid 1px;
        .item-top {
            overflow: hidden;
            zoom: 1;
            padding: 1rem 2rem;
            border-bottom: #eee solid 1px;
            .date {
                color: #B7B7B7;
                font-size: 0.9rem;
                margin-top: 0.3rem;
            }
            .more {
                padding-top: 0.5rem;
                img {
                    width: 1rem;
                }
            }
        }
        .item-detail {
            padding: 1rem 2rem;
            table {
                border: #eee solid 1px;
                width: 100%;
                text-align: center;
                line-height: 2.3rem;
                tr:nth-child(odd) {
                    background: #eee;
                }
                thead{
                    tr {
                        background: #D6F5FF!important;
                        color: #1670BC;
                        line-height: 1.6rem;
                        font-size: 1rem;
                    }
                }
                tbody{
                    td:nth-child(1) {
                        color: #323333;
                    }
                    td:nth-child(2) {
                        font-weight: bold;
                        font-size: 1rem;
                    }
                    .color {
                        color: #FF7768;
                    }
                    img {
                        width: 1rem;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
} 
</style>
